<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>

    body{
        background-image: url(微信图片_20240327085605.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        
    }
    .huanying{
        color: white ;
        text-align: center;
        font-family: 华文新魏;
    }
    .kuangjia{
        width: 800px;
        height: 800px;
        background-color: aliceblue;
        opacity: 0.8;
        margin: auto;
        margin-top: 30px;
        display: flex;
        border-radius: 5%;
    }
    .left{
        height: 800px;
        width: 400px;
        border-right: 2px solid;
    }
    .touxiang{
        width: 200px;
        height: 200px;
        border-radius: 50%;
    }
    .left-top{
        height: 200px;
        width: 400px;
        display: flex;
        border-bottom: 1px solid;
    }
    .left-top-right{
        height: 200px;
        width: 200px;
    }
    .left-top-right>p{
        text-indent: 20px;
        font-family: 宋体;
        font-size: 18px;
        font-weight: bolder;
    }
    h3{
        text-align: center;
    }
    .right{
        height: 800px;
        width: 400px;
    }
    .table,th,td,tr{
        border: 1px solid ;
        text-align: center;
    }
    table{
        
        border-collapse: collapse;
        margin: auto;
        height: 200px;
        margin-top: 70px;
    }
    tr>td:nth-child(1){
        width: 200px;
    }
    td{
        width: 100px;
    }
    th{
        background-color: wheat;
    }
    td{
        background-color: antiquewhite;
    }
    .zhaopian{
        display: flex;
        margin-top: 60px;
    }
</style>
<body>
    <h1 class="huanying">欢迎来到我的个人简历</h1>
    <div class="kuangjia">
        <div class="left">
            <div class="left-top">
                <img src="zhaopian.jpg" class="touxiang">
                <div class="left-top-right">
                    <p>姓名：陈赞吉</p>
                    <p>性别：男</p>
                    <p>专业：软件技术</p>
                    <p>年龄：18</p>
                    <p>出生地：广东茂名</p>
                </div>
            </div>
            <h3>座右铭</h3>
            <p style="text-align: center;">不论现在怎样，明天都在继续</p>
            <h3>教育经历</h3>
            <p style="text-align: center;">2023年毕业于茂名市电海中学</p>
            <p style="text-align: center;">2023年就读于顺德职业技术学院</p>
            <h3>个人介绍</h3>
            <p style="text-indent: 2rem;margin-left: 10px; margin-right: 10px; line-height: 30px;">
                我是一个热爱编程的大学生小白，目前还在学习前端开发技术，我热衷于学习更多新的编程知识，
                热爱团队合作，在大学阶段，我有很强的积极性参与到小组作业中来，如果有同样是初学者的同学愿意和我一起学习编程技术，欢迎添加我的邮箱:-------------<br>
                <span>178****2301@qq.com &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    Ciallo～(∠・ω< )⌒★</span>
            </p>
            <h3>兴趣爱好</h3>
            <ul>
                <li>学习编程</li>
                <li>跑步</li>
                <li>在思题目学习平台上学习道德与法治</li>
                <li>各种美食</li>
            </ul>
        </div>
        <div class="right">

            <h3 style="margin-top: 30px;">大学成绩表</h3>
            <table>
                <tr>
                    <th>
                        科目
                    </th>
                    <th>
                        成绩
                    </th>
                </tr>
                <tr>
                    <td>高等数学</td>
                    <td>A+</td>
                </tr>
                <tr>
                    <td>英语</td>
                    <td>B+</td>
                </tr>
                <tr>
                    <td>web前端开发技术</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>
                        体育
                    </td>
                    <td>
                        A
                    </td>
                </tr>
            </table>
            <h3 style="margin-top: 60px;">照片墙</h3>
            <div class="zhaopian">
            <img src="luoshifen.jpg" style="width: 200px; border-radius: 5%;" >
            <img src=" tiankong.jpg" style="width: 200px; border-radius: 5%;">
            </div>
        </div>
    </div>
</body>
</html>